<template>
	<view class="content">

		<view :style="{paddingTop:data.statusBarHeight+'rpx'}" class="head-box">
			<view class="head-title">我的订单</view>
		</view>
		<view class="flex-justify-center menu-box ">
			<view class="menu-content flex-align-center">
				<view @click="onChangeType(1)"
					:class="['title-item',data.type==1?'title-item-active':'','flex-center-r']">
					<text>全部</text>
					<view :class="['bottom-line',data.type==1?'bottom-line-active':'']"></view>
				</view>
				<view @click="onChangeType(2)"
					:class="['title-item',data.type==2?'title-item-active':'','flex-center-r']">
					<text>赛事</text>
					<view :class="['bottom-line',data.type==2?'bottom-line-active':'']"></view>
				</view>
				<view @click="onChangeType(3)"
					:class="['title-item',data.type==3?'title-item-active':'','flex-center-r']">
					<text>票券</text>
					<view :class="['bottom-line',data.type==3?'bottom-line-active':'']"></view>
				</view>
				<view @click="onChangeType(4)"
					:class="['title-item',data.type==4?'title-item-active':'','flex-center-r']">
					<text>订场</text>
					<view :class="['bottom-line',data.type==4?'bottom-line-active':'']"></view>
				</view>
				<view @click="onChangeType(5)"
					:class="['title-item',data.type==5?'title-item-active':'','flex-center-r']">
					<text>会员</text>
					<view :class="['bottom-line',data.type==5?'bottom-line-active':'']"></view>
				</view>
			</view>
			<view class="line"></view>
		</view>
		<!-- 列表 -->
		<scroll-view @scrolltolower="lower" :style="{height:data.clientHeight+'px'}" id="scrollT" :scroll-top="scrollTop" scroll-y="true">
			<view class="list-box">
				<view class="item" v-for="(item,index) in data.list" :key="index">
					<view class="time">{{item.date}}｜{{item.week}}</view>
					<view class="flex-align-end ">
						<view class="bifen">{{item.time}}</view>
						<view class="type">{{item.type.value}}</view>
						<view v-show="item.type.code!=3">
							<view class="state" v-if="item.type.code==1">{{item.state?'已开始':'待开始'}}</view>
							<view class="state" v-else>{{item.state?'已使用':'待使用'}}</view>
						</view>

					</view>
					<view class="item-info">
						<view class="flex-align-center">
							<img :src="item.logo" class="head-img" alt="">
							<text class="name">{{item.enterpriseName}}</text>
						</view>
						<view class="type-name">
							{{item.gameName || item.memberName || item.siteName || item.ticketName }}
						</view>
						<view class="flex-align-center">
							<text class="price">¥{{item.price}}</text>
							<text class="leixing">{{item.group}}</text>
						</view>
						<view class="address flex-justify-s">
							<view class="flex-align-center">
								<img class="fx-dingwei" src="../../../static/img/img/fx-dingwei.png" alt="">
								<text class="address-text">{{item.address}}</text>
							</view>
							<view class="btn" @click="verify(item)">使用</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no-data">
				<uv-load-more fontSize="12" v-if="data.isComplete" status="nomore" />
			</view>
			
		</scroll-view>
		<!-- 二维码 -->
		<Code :type='data.currentType' :item="data.order" @close="close" v-if="data.showCode"></Code>
		<!-- <tabBar :selectedIndex="2"></tabBar> -->
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		computed,
		watch
	} from "vue";
	import {
		useStatusBarStore
	} from "@/store/index";
	import {
		setScrollHeight
	} from '@/utils/uitls.js'
	import {
		onShow
	} from "@dcloudio/uni-app";
	import Code from "@/compoments/order/code.vue";
	import {
		echoList
	} from '../../../requestApi/api.js';
	const statusBar = useStatusBarStore();
	const instance = getCurrentInstance(); //获取当前实例
	const data = ref({
		statusBarHeight: 0,
		clientHeight: 0,
		type: 1, //1全部 2赛事 3票券 4订场 5会员
		showCode: false,
		list: [], //后端设置的订单类型  赛事1 票券2 会员卡3 订场4
		info: {},
		isLoading: false,
		isComplete: false,
		"current": 1, //页码
		"size": 10, //每页大小
		week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
		currentType:'order',  
		 order:{},
	})
	onShow(async () => {
		data.value.statusBarHeight = await statusBar.getStatusBarHeight();
		setTimeout(() => {
			setScrollHeight('#scrollT', instance).then(res => {
				data.value.clientHeight = res;
			});
		}, 500);
		getList();

	})
	//触底
	const lower=()=>{
		!data.value.isLoading && !data.value.isComplete && getList();
	};
	//获取列表
	const getList = () => {
		data.value.isLoading = true;
		echoList({
			type: data.value.type,
			current: data.value.current,
			size: data.value.size
		}).then(res => {
			res.data.records.map((item) => {
				let date = new Date(item.createTime);
				let year = date.getFullYear();
				let moon = date.getMonth() + 1;
				let day = date.getDate();
				item.date = year + '.' + moon + '.' + day;
				let h = date.getHours();
				let m = date.getMinutes();
				let s = date.getSeconds();
				item.time = h + ':' + m + ':' + s;
				let w = date.getDay();
				item.week = data.value.week[w];
				return item;
			})
			data.value.isLoading = false;
			data.value.list = data.value.list.concat(res.data.records);
			data.value.current++;
			data.value.isComplete = !res.data.records.length;
		})
	};
	//关闭弹窗
	function close() {
		data.value.showCode = false;
	}

	// 打开弹窗验证二维码
	function verify(item) {
		if(item.type.code==3){
			//会员卡
			data.value.currentType='vip';
		}else{
			data.value.currentType='order';
		}
		
		data.value.order=item;
		
		data.value.showCode = true;
	}

	function onChangeType(type) {
		data.value.type = type;
		data.value.current=1;
		data.value.list=[];
		data.value.isComplete=false;
		getList();
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}

	.head-box {
		padding: 0 40rpx;
		background-color: #FFFFFF;

		.head-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #2C2C2C;
			height: 88rpx;
			display: flex;
			align-items: flex-end;
		}
	}

	.menu-box {
		height: 108rpx;
		padding-right: 76rpx;
		flex-direction: column;
		padding-top: 10rpx;
		background-color: #FFFFFF;

		.menu-content {
			padding: 0 40rpx;
			margin-bottom: 10rpx;

			.title-item {
				font-size: 30rpx;
				color: #2C2C2C;
				margin-right: 40rpx;

				.bottom-line {
					width: 30rpx;
					height: 8rpx;
					background-color: #FFFFFF;
					border-radius: 16rpx;
					margin-top: 4rpx;
				}

				.bottom-line-active {
					background-color: #5E77F8;
				}

			}

			.title-item-active {
				font-size: 30rpx;
				color: #2C2C2C;
				font-weight: bold;
			}
		}

		.line {
			border: 2rpx solid rgba(165, 165, 165, 0.1);
		}
	}

	.list-box {
		padding: 10rpx 40rpx;

		.item {
			margin-bottom: 20rpx;

			.time {
				font-size: 30rpx;
				font-weight: bold;
				color: #2C2C2C;
				margin-bottom: 10rpx;
			}

			.bifen {
				font-size: 20rpx;
				color: #A5A5A5;
				margin-right: 24rpx;
			}

			.type {
				width: 84rpx;
				height: 40rpx;
				background: url("../../../static/img/img/order-bg-icon.png") no-repeat;
				background-size: contain;
				font-size: 22rpx;
				font-weight: bold;
				color: #2C2C2C;
				line-height: 40rpx;
				text-align: center;
				margin-right: 20rpx;
			}

			.state {
				width: 98rpx;
				height: 40rpx;
				background: rgba(255, 255, 255, 0.39);
				border: 2rpx solid #59B13F;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #59B13F;
				text-align: center;
				line-height: 32rpx;
			}

			.item-info {
				margin-top: 16rpx;
				width: 100%;
				height: 244rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 14rpx 22rpx;

				.head-img {
					width: 46rpx;
					height: 46rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				.name {
					font-size: 24rpx;
					font-weight: bold;
					color: #2C2C2C;
				}

				.type-name {
					margin: 10rpx 0 14rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #2C2C2C;
				}

				.price {
					font-size: 28rpx;
					font-weight: bold;
					color: #FF3170;
					display: inline-block;
					margin-right: 48rpx;
				}

				.leixing {
					font-size: 24rpx;
					color: #2C2C2C;
				}

				.address {
					margin-top: 10rpx;

					.fx-dingwei {
						width: 20rpx;
						height: 20rpx;
						margin-right: 20rpx;
					}

					.address-text {
						font-size: 20rpx;
						color: #A5A5A5;
					}

					.btn {
						width: 167rpx;
						height: 60rpx;
						background: rgba(61, 102, 246, 1);
						box-shadow: 0rpx 4rpx 12rpx rgba(61,102,246,0.55);
						border-radius: 30rpx;
						font-size: 24rpx;
						font-weight: bold;
						line-height: 60rpx;
						color: #FFFFFF;
						text-align: center;
					}
				}
			}
		}
	}
</style>